<template>
  <div>
    <h1>用户中心</h1>
    <div v-if="user">
      <p>用户名: {{ user.username }}</p>
      <p>性别: {{ user.gender }}</p>
      <p v-if="user.idwriter">作者身份: 是</p>
      <p v-else>作者身份: 否</p>
      <div v-if="!user.idwriter">
        <h3>申请成为作者</h3>
        <el-form @submit.prevent="becomeWriter">
          <el-form-item label="真实姓名">
            <el-input v-model="realName"></el-input>
          </el-form-item>
          <el-form-item label="笔名">
            <el-input v-model="penName"></el-input>
          </el-form-item>
          <el-button type="primary" @click="becomeWriter">提交</el-button>
        </el-form>
      </div>
      <div v-else>
        <h3>创作者菜单</h3>
        <el-menu>
          <el-menu-item index="1">
            <router-link to="/writer">创作者中心</router-link>
          </el-menu-item>
          <el-menu-item index="2">
            <router-link to="/check">内容和谐</router-link>
          </el-menu-item>
          <el-menu-item index="3">
            <router-link to="/chat">智能小说生成</router-link>
          </el-menu-item>
        </el-menu>
      </div>
      <h3>修改用户信息</h3>
      <el-form @submit.prevent="updateUser">
        <el-form-item label="性别">
          <el-input v-model="user.gender"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-button type="primary" @click="updateUser">保存修改</el-button>
      </el-form>
    </div>
    <div v-if="message">
      <el-alert :title="message" type="info"></el-alert>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      user: null,
      realName: '',
      penName: '',
      message: ''
    };
  },
  created() {
    this.fetchUser();
  },
  methods: {
    fetchUser() {
      const token = localStorage.getItem('accessToken');
      axios.get('/api/users/me', {
        headers: {
          Authorization: `Bearer ${token}`
        }
      })
        .then(response => {
          this.user = response.data;
        })
        .catch(error => {
          console.error('Error fetching user:', error);
        });
    },
    updateUser() {
      const token = localStorage.getItem('accessToken');
      axios.put(`/api/users/${this.user.iduser}`, this.user, {
        headers: {
          Authorization: `Bearer ${token}`
        }
      })
        .then(response => {
          this.message = '用户信息已更新';
        })
        .catch(error => {
          console.error('Error updating user:', error);
          this.message = '用户信息更新失败';
        });
    },
    becomeWriter() {
      const token = localStorage.getItem('accessToken');
      axios.post('/api/writers/become-writer', null, {
        params: {
          realName: this.realName,
          penName: this.penName
        },
        headers: {
          Authorization: `Bearer ${token}`
        }
      })
        .then(response => {
          this.fetchUser();
          this.message = '申请成为作者成功';
        })
        .catch(error => {
          console.error('Error becoming writer:', error);
          this.message = '申请成为作者失败';
        });
    }
  }
};
</script>

<style scoped>
/* Add your styles here */
</style>
